<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>

<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="18">
            <el-avatar> user </el-avatar>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" icon="el-icon-goods" circle
                       onclick="window.location.href = 'http://localhost:8080/show.html'"></el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" icon="el-icon-delete" @click="clear"circle></el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" >结算</el-button>
        </el-col>
    </el-row>


    <template>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="name" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价(元)" align="center">
            </el-table-column>
            <el-table-column prop="delete" label="移除(-1/次)" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click.native.prevent="deleteRow(scope.$index, tableData)"
                               icon="el-icon-shopping-cart-2">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',

        mounted() {
            this.selectShowCar();
        },

        methods: {
            selectShowCar() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectShowCar"
                }).then(function (resp) {
                    _this.tableData = resp.data;

                    console.log(resp.data);

                })
            },
            deleteRow(index,rows) {
                console.log(rows[index].name);
                console.log(rows[index].price);
                axios({
                    method: "get",
                    url: "http://localhost:8080/ShowCarController/remove?names=" + rows[index].name
                })
                this.selectShowCar();

            },
            clear(){
              axios({
                  method:"get",
                  url:"http://localhost:8080/ShowCarController/clear"
              })
                this.selectShowCar();
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1 || rowIndex === 5) {
                    return 'warning-row';
                } else if (rowIndex === 3 || rowIndex === 7) {
                    return 'success-row';
                }
                return '';
            },



        }, data() {
            return {
                //表格数据
                tableData: []
            }
        }

    })
</script>

</html>